<template>
  <div>
    <section class="con container">
      <!-- 导航路径区域 -->
      <!-- 导航路径区域 -->
      <div class="conPoin">
        <div class="conPoin">
          <a>{{ categoryView.category1Name }}</a>
          <a> {{ categoryView.category2Name }} </a>
          <a> {{ categoryView.category3Name }} </a>
        </div>
      </div>
      <!-- 主要内容区域 -->
      <div class="mainCon">
        <!-- 左侧放大镜区域 -->
        <div class="previewWrap">
          <!--放大镜效果-->
          <Zoom :bigImg="skuInfo.skuImageList[currentIndex]"></Zoom>
          <!--下方的缩略图-->
          <ImgList
            :skuImageList="skuInfo.skuImageList"
            :currentIndex="currentIndex"
            @getImgIndex="getImgIndex"
          ></ImgList>
        </div>
        <!-- 右侧选择区域布局 -->
        <div class="InfoWrap">
          <div class="goodsDetail">
            <h3 class="InfoName" style="font-weight: bold">
              {{ skuInfo.skuName }}
            </h3>
            <p class="news">
              {{ skuInfo.skuDesc }}
            </p>
            <div class="priceArea">
              <div class="priceArea1">
                <div class="title">
                  价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
                </div>
                <div class="price">
                  <i>¥</i>
                  <em> {{ price }} </em>
                  <span>降价通知</span>
                </div>
                <div class="remark">
                  <i>累计评价</i>
                  <em>65545</em>
                </div>
              </div>
              <div class="priceArea2">
                <div class="title">
                  <i>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</i>
                </div>
                <div class="fixWidth">
                  <i class="red-bg">加价购</i>
                  <em class="t-gray"
                    >满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em
                  >
                </div>
              </div>
            </div>
            <div class="support">
              <div class="supportArea">
                <div class="title">
                  支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持
                </div>
                <div class="fixWidth">
                  以旧换新，闲置手机回收 4G套餐超值抢 礼品购
                </div>
              </div>
              <div class="supportArea">
                <div class="title">配 送 至</div>
                <div class="fixWidth">广东省 深圳市 宝安区</div>
              </div>
            </div>
          </div>

          <div class="choose">
            <div class="chooseArea">
              <div class="choosed"></div>
              <dl v-for="attr in spuSaleAttrList" :key="attr.id">
                <dt class="title">{{ attr.saleAttrName }}</dt>
                <dd
                  changepirce="0"
                  v-for="value in attr.spuSaleAttrValueList"
                  :key="value.id"
                  :class="{ active: value.isChecked === '1' }"
                  @click="changeIsChecked(attr.spuSaleAttrValueList, value.id)"
                >
                  {{ value.saleAttrValueName }}
                </dd>
              </dl>
            </div>

            <div class="cartWrap clearfix">
              <!-- 数字输入框 -->
              <NumInput v-model="buyNum" :min="1" :max="10"></NumInput>
              <div class="add">
                <button type="button" @click="toCart">加入购物车</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import NumInput from "./NumInput";
import { reqAddToCart } from "@/api/shopcartApi";
import ImgList from "./ImgList/index.vue";
import Zoom from "./Zoom/index.vue";

export default {
  name: "Detail",
  components: {
    NumInput,
    ImgList,
    Zoom,
  },
  methods: {
    ...mapActions("detail", ["getDetailData"]),
    getImgIndex(index) {
      // console.log(index);
      this.currentIndex = index;
    },
    async toCart() {
      // 发送请求添加到购物车
      const id = this.$route.params.id;
      await reqAddToCart(id, this.buyNum);

      // 路由跳转前把该商品数据存到localstorage中
      const attr = this.spuSaleAttrList.map((attr) => {
        const val = attr.spuSaleAttrValueList.find((item) => {
          return item.isChecked === "1";
        });
        return val;
      });
      this.goods.name = this.skuInfo.skuName;
      this.goods.goodNum = this.buyNum;
      this.goods.price = this.price;
      this.goods.url = this.skuInfo.skuDefaultImg;
      this.goods.id = this.skuInfo.id;
      this.goods.attr = attr;
      localStorage.setItem("goods", JSON.stringify(this.goods));

      // 路由跳转
      this.$router.history.push({
        name: "CartSuccess",
      });
    },
    changeIsChecked(attrList, id) {
      attrList.forEach((item) => {
        if (item.id === id) item.isChecked = "1";
        else item.isChecked = "0";
      });
    },
  },
  data() {
    return {
      currentIndex: 0,
      buyNum: 1,
      goods: {},
    };
  },
  computed: {
    ...mapState("detail", [
      "categoryView",
      "price",
      "skuInfo",
      "spuSaleAttrList",
    ]),
  },
  async mounted() {
    const { id } = this.$route.params;
    this.getDetailData(id);
  },
};
</script>
<style lang='less' scoped>
.con {
  width: 1200px;
  margin: 15px auto 0;
  .conPoin {
    padding: 9px 15px 9px 0;
    & > a + a:before {
      content: "/\00a0";
      padding: 0 5px;
      color: #ccc;
    }
  }
  .mainCon {
    overflow: hidden;
    margin: 5px 0 15px;
    .previewWrap {
      float: left;
      width: 400px;
      position: relative;
      .preview {
        width: 400px;
        height: 400px;
        border: 1px solid #dfdfdf;
        .jqzoom {
          cursor: pointer;
          width: 400px;
          height: 400px;
          position: relative;
          img {
            width: 100%;
          }
          .mask {
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid #ddd;
          }
        }
        .maxbox {
          width: 400px;
          height: 400px;
          position: absolute;
          left: 420px;
          top: 0px;
          overflow: hidden;
          z-index: 20;
          border: 1px solid #ddd;
          img {
            width: 800px;
            height: 800px;
            display: block;
          }
        }
      }
      .specScroll {
        margin-top: 5px;
        width: 400px;
        overflow: hidden;
        .prev,
        .next {
          text-align: center;
          width: 10px;
          height: 54px;
          line-height: 54px;
          border: 1px solid #ccc;
          background: #ebebeb;
          cursor: pointer;
        }
        .prev {
          float: left;
          margin-right: 4px;
        }
        .next {
          float: right;
        }
        .items {
          float: left;
          position: relative;
          width: 372px;
          height: 56px;
          overflow: hidden;
          .itemsCon {
            position: absolute;
            width: 9999px;
            height: 56px;
            left: 0;
            img {
              float: left;
              text-align: center;
              border: 1px solid #ccc;
              padding: 2px;
              width: 50px;
              height: 50px;
              margin-right: 20px;
            }
          }
        }
      }
    }
    .InfoWrap {
      width: 700px;
      float: right;
      .InfoName {
        font-size: 18px;
        font-weight: bold;
        line-height: 21px;
      }
      .news {
        color: #e12228;
        margin-top: 15px;
      }
      .priceArea {
        background: #f5f5f5;
        padding: 7px;
        margin: 13px 0;
        .priceArea1 {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            float: left;
            margin-right: 15px;
          }
          .price {
            float: left;
            color: #c81623;
            .rob {
              margin-right: 10px;
            }
            i {
              font-size: 16px;
              margin-right: 5px;
            }
            em {
              font-size: 24px;
              font-weight: 700;
              margin-right: 10px;
            }
            .oldPrice {
              font-size: 12px;
              color: #aaa;
              text-decoration: line-through;
            }
          }
          .remark {
            float: right;
          }
        }
        .priceArea2 {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            margin-right: 15px;
            float: left;
          }
          .fixWidth {
            width: 520px;
            float: left;
            .red-bg {
              background: #c81623;
              color: #fff;
              padding: 3px;
            }
            .t-gray {
              color: #999;
            }
          }
        }
      }
      .support {
        border-bottom: 1px solid #ededed;
        padding-bottom: 5px;
        .supportArea {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            margin-right: 15px;
            float: left;
          }
          .fixWidth {
            width: 520px;
            float: left;
            color: #999;
          }
        }
      }
      .choose {
        .chooseArea {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .choosed {
            mark {
              height: 30px;
              display: inline-block;
              line-height: 30px;
              background-color: snow;
              border: 1px solid #ddd;
              padding: 0 20px;
              margin-right: 20px;
              a {
                font-size: 12px;
                color: red;
                margin-left: 20px;
                cursor: pointer;
              }
            }
          }
          dl {
            overflow: hidden;
            margin: 13px 0;
            dt {
              margin-right: 15px;
              float: left;
            }
            dd {
              float: left;
              margin-right: 5px;
              color: #666;
              line-height: 24px;
              padding: 2px 14px;
              border-top: 1px solid #eee;
              border-right: 1px solid #bbb;
              border-bottom: 1px solid #bbb;
              border-left: 1px solid #eee;
              &:nth-of-type(1) {
                color: red;
              }
            }
          }
        }
        .cartWrap {
          .controls {
            width: 48px;
            position: relative;
            float: left;
            margin-right: 15px;
            .itxt {
              width: 38px;
              height: 37px;
              border: 1px solid #ddd;
              color: #555;
              float: left;
              border-right: 0;
              text-align: center;
            }
            .plus,
            .mins {
              width: 15px;
              text-align: center;
              height: 17px;
              line-height: 17px;
              background: #f1f1f1;
              color: #666;
              position: absolute;
              right: -8px;
              border: 1px solid #ccc;
            }
            .mins {
              right: -8px;
              top: 19px;
              border-top: 0;
            }
            .plus {
              right: -8px;
            }
          }
          .add {
            float: left;
            button {
              background-color: #e1251b;
              padding: 0 25px;
              font-size: 16px;
              color: #fff;
              height: 36px;
              line-height: 36px;
              display: block;
              &:hover {
                color: #fff !important;
                text-decoration: none;
              }
            }
            a {
              background-color: #e1251b;
              padding: 0 25px;
              font-size: 16px;
              color: #fff;
              height: 36px;
              line-height: 36px;
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>